<template>
    <Card>
        <div ref="div" style="height:600px">
            <iframe :src="src" allowtransparency="true" style="border:0;width:100%;height:99.3%;" frameborder="0" @load="onload"></iframe>
        </div>
    </Card>
</template>
<script>
export default {
    props: ["url", "height", "modal"],
    created() {},
    mounted() {
        if (this.height) {
            this.$refs.div.style.height = this.height + 'px';
        } else if (this.modal) {
            this.$refs.div.style.height = (this.$parent.$el.offsetHeight - 500) + "px";
        } else {
            this.$refs.div.style.height = (this.$parent.$el.offsetHeight - 160) + "px";
        }
    },
    methods:{
        onload(){
            this.$refs.div.style.opacity = 1;
        }
    },
    computed: {
        src: function() {
            if (this.modal) {
                return this.modal.url;
            }
            if (this.$route) {
                return this.$route.meta.link;
            } else if (this.url) {
                return this.url;
            }
        }
    },
    watch:{
        "src":function(value){
            this.$refs.div.style.opacity = 0;
        }
    }
};
</script>